<template>
	<div class="con-z">
		<div class="right">
			<div class="right-top">
				图片管理
			</div>
		
			<div class="right-bto">
				<div  class="search flex"> 
				<div>
					 <el-button type="primary" @click="add">添加</el-button>
				</div>
					<div style="margin-left: 20px;">
						<el-input placeholder="请输入关键词进行搜索" v-model="keyword" class="input-with-select">
						  </el-input>
						  <el-button type="primary" icon="el-icon-search" @click="getlist()"></el-button>
					</div>
				</div>
				
				<div class="main">
					<div class="main-item" v-for="(item,index) in list" :key="index">
						<div style="text-align: center;font-size: 20px;">
							{{item.name}}
						</div>
						<div calss="main-photo" @click="look(item)" >
							<!-- <img :src="imgurl + item.image_url" alt="" style="width: 100%;height: 175px;" > -->
							 <!-- <el-image 
							    style="width: 100%;height: 175px;"
							    :src="imgurl + item.image_url" >
							  </el-image> -->
						</div>
						
						<div class="main-btn">
							<div>
								<el-button type="text" @click="look(item)">详情</el-button>
								<!-- <el-button type="text">编辑</el-button> -->
							</div>
							<div>
								<el-button type="text" @click="del(item.id)">删除</el-button>
							</div>
						</div>
					</div>
					

				</div>
		<div class="block" style="margin-top: 18px;">
		    <el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				:page-sizes="[10]"
				:page-size="10"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
		    </el-pagination>
		</div>
			</div>
			
		</div>
		<el-dialog :title="form.id?'查看':'添加'" :visible.sync="dialogVisible" width="40%">
			<span>
				<el-form ref="form"  :model="form" label-width="100px"  :inline="false">
					<el-form-item label="图片名称" required  >
						 <el-input   v-model="form.name" clearable style="width: 200px;" :disabled ="form.id?true:false"  ></el-input>
					</el-form-item>	
					<div style="display: flex; text-align: center;">
						<el-form-item label="展品图"  :required="true">
							<el-upload class="avatar-uploader" :action="url+'back/common/upload'" :show-file-list="false"
							:disabled ="form.image_url?true:false"
								:headers="headers" :on-success="handleAvatarSuccess">
								<!-- <img v-if="form.image_url" :src="imgurl+form.image_url" class="avatar"> -->
								<el-image
								class="avatar"
								v-if="form.image_url"
								   style="width: 100%;height: 175px;"
								   :src="imgurl+form.image_url" 
								   :preview-src-list="[imgurl+form.image_url]">
								 </el-image>
								 <span v-else class=" avatar-uploader-icon">500 * 500</span>
								<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
							</el-upload>
						</el-form-item>
						<el-form-item label="详情图"  :required="true">
							<el-upload class="avatar-uploader" :action="url+'back/common/upload'" :show-file-list="false"
								:disabled ="form.introduce_url?true:false"
								:headers="headers" :on-success="handleAvatarSuccess1">
								<!-- <img v-if="form.introduce_url" :src="imgurl+form.introduce_url" class="avatar"> -->
								<el-image
								class="avatar"
								v-if="form.introduce_url"
								   style="width: 100%;height: 175px;"
								   :src="imgurl+form.introduce_url" 
								   :preview-src-list="[imgurl+form.introduce_url]">
								 </el-image>
								  <span v-else class=" avatar-uploader-icon">500 * 500</span>
								<!-- <i v-else class="el-icon-plus avatar-uploader-icon" ></i> -->
							</el-upload>
						</el-form-item>
					</div>
					<div style="text-align: center;">
						<el-form-item label="视频" v-if="videoshow" >
						             <el-upload :action="url+'back/common/upload'" :headers="headers" class="avatar-uploader" style="width:500px"
						                        :show-file-list="false"  accept="video/*"
																		 :disabled ="form.video_url?true:false"
						                        :on-success="handlelegalPersonVideoSuccess">
						               <video
						                 v-if="form.video_url"
						                 :src="imgurl+form.video_url"
						                 class="video-avatar"
						                 :autoplay="false"
						                 controls="controls"
						                 muted
						                 loop
						               ></video>
										<span v-else class=" avatar-uploader-icon" style="width: 500px;">请上传视频，且不得超过5M</span>
						              <!-- <i v-else class="el-icon-plus avatar-uploader-icon" style="width: 500px;"></i> -->
						             </el-upload>
						           </el-form-item>
					</div>
						 
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer" v-if="form.id?false:true">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import setting from '@/config/setting';
	export default{
		data(){
			return{
				msglist:[
					{name:'图片管理',id:0},
				],
	
				dialogVisible:false,
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				form:{},
				page:1,
				total:0,
				keyword:'',
				list:[],
				videoshow:true
			}
		},
		mounted(){
			this.getlist()
		},
		methods:{
			getlist(){
				this.$http.get('back/picture/list?page=' + this.page + '&keyword=' + this.keyword).then(res => {
					console.log(res.data.data.current_page)
					
					this.page = res.data.data.current_page
					this.total =res.data.data.total
					this.list = res.data.data.data
				})
			},
			// 添加图片视频
			submit(){
				if(!this.form.name || !this.form.image_url || !this.form.introduce_url){
					this.$message.error('请添加完整内容');
					return
				}
				this.$http.post('/back/picture/edit',this.form).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();
						this.dialogVisible=false;
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			add(){
				
				this.$set(this,'form',{})
				this.dialogVisible = true
				this.videoshow = true
				console.log(this.form.id)
			},
			
			del(id,num){
				 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							this.$http.post('/back/picture/del',{
								id:id
							}).then(res => {
								if (res.data.code == 1) {
									this.$message({
										message: res.data.msg,
										type: 'success'
									});
									
									this.getlist();
								} else {
									this.$message.error(res.data.msg);
								}
							})
				          
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
				
				
				
					
				
				
			},
			look(item){
				this.$set(this,'form',item)
				console.log(this.form)
				if(!this.form.video_url){
					this.videoshow = false
				} else {
					this.videoshow = true
				}
				this.dialogVisible = true;
			},
			 handlelegalPersonVideoSuccess(res) {
				 if(res.code == 0){
				 	this.$message.error(res.msg);
				 }
					this.$set(this.form,'video_url',res.code.url)	
			},

			handleAvatarSuccess(res) {
				if(res.code == 0){
					this.$message.error(res.msg);
				}
				console.log( res)
				this.$set(this.form, 'image_url', res.code.url)
			},
			handleAvatarSuccess1(res) {
				if(res.code == 0){
					this.$message.error(res.msg);
				}
				this.$set(this.form, 'introduce_url', res.code.url)
			},

			 handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
				this.page=val;
				this.getlist();
			},
			handleCommand(command){
				this.dropdown = command
			},
			handleClick(){
				this.$router.push("/yujingtuisong/yujingdetail")
			}
		}
	}
	
</script>

<style scoped lang="scss">
	.video-avatar{
		width: 500px;
		height:300px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 20px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.flex{
		display:flex;
	}
	.con-z{
		height:100vh;
		position: relative;
		.left{
			position: absolute;
			left: 0;
			top: 0;
			width: 10%;
			height: 100%;
			background-color: #fff;
			border-right: 1px solid rgba(0,0,0,.1);
		}
		.right{
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			.right-top{
				witdh:100%;
				background-color: #fff;
				font-weight: 600;
				font-size: 16px;
				padding: 16px 24px;
			}
			.right-bto{
				margin-top: 20px;
				padding: 0 20px ;
				overflow: auto;
				height: 90%;
				.search{
					padding: 24px;
					background-color: #fff;
					border-bottom: 1px solid #e8e8e8;
					.input-with-select{
						width:360px;
					}
					.shaixuan{
						color:#666666;
						.time{
							margin-top: 10px;
							height: 36px;
							line-height: 36px;
							.font{
								margin-right: 10px;
							}
						}
					}
				}
				.paixu{
					background-color: #fff;
					padding: 24px;
					font-size: 13px;
					display:flex;
					justify-content: space-between;
					border-bottom: 1px solid #e8e8e8;
				}
				.main{
					  display: grid; 
									 /* 分为几列，可以设置列的宽度 */
									  grid-template-columns: auto auto auto auto auto;
									  /* 网格之间的距离 */
									  grid-gap:10px;
					background-color: #fff;
					padding: 24px;
					border-bottom: 1px solid #e8e8e8;
					.main-item{
						width:230px;
						height:230px;
						margin: 0 15px;
						.main-btn{
							margin-top: 5px;
							display:flex;
							justify-content: space-between;
							font-size: 20px;
						}
					}
				}
			}
			
		}
	}
	
</style>